<template>
  <div
    v-infinite-scroll="load"
    style="
      overflow: auto;
      height: 650px;
      pamargin-top:50pxdding: 0px;
      margin: 0px;
    "
  >
    <div v-for="i in count" :key="i" style="padding: 0px; margin: 0px">
      <div
        v-for="o in journalismForm"
        :key="o.id"
        class="text item infinite-list-item"
        :v-model="journalismForm"
      >
        <el-card class="box-card" style="margin-right: 1rem; height: auto">
          <table style="width: 100%" class="s">
            <tr @click="handlexinwen(o.id)">
              <td style="padding-right: 1rem; border: solid 1px; width: 13%">
                <div class="demo-image" style="text-align: center">
                  <img
                    src="../assets/logo.png"
                    style="
                      pointer-events: none;
                      width: 90px;
                      height: 90px;
                      background-repeat: no-repeat;
                    "
                    alt=""
                  />
                </div>
              </td>
              <td style="text-align: center; padding-left: 1rem">
                <div style="text-align: center; margin-bottom: 0.5rem">
                  <h1
                    style="
                      font-size: 32px;
                      font-family: '等线';
                      text-align: left;
                      padding-bottom: 0.5rem;
                    "
                  >
                    {{ o.articleTitle }}
                  </h1>
                </div>
                <div style="text-align: left">
                  <el-input
                    type="textarea"
                    :rows="3"
                    v-model="o.articleContent"
                    v-html="o.articleContent"
                    readonly="readonly"
                    class="input__textarea"
                    text
                  >
                  </el-input>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <div style="text-align: right; margin-top: 0.5rem">
                  <span>
                    <el-badge :value="value" class="item" type="warning">
                      <el-button size="small"
                        >发布日期:{{ o.updatedTime | dateFormat }}</el-button
                      >
                    </el-badge>
                  </span>
                </div>
              </td>
            </tr>
          </table>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import marked from 'marked'
// import {GetArticles} from '../api/user'
export default {
  data () {
    return {
      count: 0,
      value: '',
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',

      journalismForm: [

      ]
    }
  },
  methods: {
    load () {
      this.count += 1;
    },
    //把点击的新闻id传输到目标页面，并跳转
    handlexinwen: function (id) {
      this.$router.push({ name: 'aaaa', params: { key: id } }
      );
    },
    //填充新闻
    getArticles: function () {
      axios.get('http://localhost:5000/article/Articles').then(res => {
        res.data.data.forEach(item => {
          if (item.isDeleted == false && item.isActived == true) {
            this.journalismForm.push(item);
          }
          // 循环遍历文章列表中的文章内容信息并进行md转html
          for (let index = 0; index < this.journalismForm.length; index++) {
            // 获取内容
            var markdowncontent = this.journalismForm[index].articleContent
            // md转html
            this.journalismForm[index].articleContent = marked(markdowncontent)
          }
        });
      }).catch();
    }
  },
  mounted: function () {
    this.getArticles();
  }
}
</script>

<style scoped>
.demo-image {
  /* background:#fff; */
  display: flex;
  text-align: center;
  align-items: center;
  cursor: unset;
}

.demo-image img {
  clear: both;
  display: block;
  margin: auto;
  width: 90px;
  height: 90px;
  align-items: center;
}
/* 文本域选择器属性 */
.el-input {
  border: none;
  float: left;
}
* {
  margin: 0px;
  padding: 0px;
  /* user-select: none; */
  font-family: '等线';
}

.el-tabs_nav-scroll {
  border: none;
  border-width: 1px;
  /* background-color: aquamarine */
}
/* 新闻推荐卡片效果 */
.s {
  cursor: pointer;
  user-select: none;
}
.s:hover {
  color: #409eff;
}
.el-f1 {
  width: 80%;
  float: left;
}
.el-f2 {
  float: left;
  /* background-color: aliceblue; */
  width: 19%;
  margin-left: 1px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
.el-button {
  /* border: none; */
  border-width: 0.5rem;
  border-color: white;
  border-style: solid;
}
.box-card {
  /* height: 23%; */
  margin-bottom: 1rem;
}
.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>